<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>分级</title>
    <link rel="stylesheet" href="/vendor/laravel-admin/AdminLTE/bootstrap/css/bootstrap.min.css">
    <script src="/vendor/laravel-admin/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/static/echarts@5/js/echarts.min.js"></script>
    <script type="text/javascript" src="/static/html2canvas/js/html2canvas.js"></script>
    <script type="text/javascript" src="/static/html2canvas/js/jspdf.debug.js"></script>
    <style>
        * {
            font-family: "simhei";
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            outline: none
        }

        ul, li {
            list-style-type: none;
        }

        .clear {
            clear: both;
        }

        .main {
            width: 1200px;
            margin: 0 auto;
        }

        .header-top {
            height: 40px;
            background-color: rgba(26, 28, 33, 0.86)
        }

        .header-top .top-title {
            color: rgb(249, 249, 249);
            line-height: 40px;
            font-size: 16px;
        }

        .header-bottom {
            height: 60px;
            background-color: rgb(40 52 123);
        }

        .header-bottom .bott-a {
            line-height: 60px;
            text-align: center;
        }

        .header-bottom .bott-b {
            position: absolute;
            top: 0;
            right: 0;
            line-height: 60px;
        }

        .colorGray {
            width: 100%;
            background-color: rgb(249, 249, 249);
        }

        .title {
            color: #161920;
            text-align: center;
            font-size: 36px;
        }

        .fenji-chart {
            width: 580px;
            height: 580px;
            margin-top: 10px;
            background: #fff;
            box-shadow: 0 30px 50px rgba(0, 0, 0, .08);
            border-radius: 50px;
        }

        .fenji-right {
            height: 730px;
            position: relative;
            float: right;
        }

        .fenji-right .circle {
            background-image: linear-gradient(0deg, rgba(76, 34, 232, 0.71) 0, #4278c7);
            width: 420px;
            height: 420px;
            border-radius: 210px;
            box-shadow: 0 25px 50px rgba(76, 34, 232, 0.45);
            position: absolute;
            right: 6px;
            top: 30px;
            z-index: 1;
        }

        .fenji-right .text-list {
            width: 430px;
            height: 370px;
            background: #fff;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
            position: absolute;
            right: 90px;
            top: 120px;
            z-index: 2;
            border-radius: 50px;
        }

        .text-list table {
            margin: 40px 0 0 45px;
        }

        .text-list th {
            width: 75px;
            padding: 15px 10px 5px 5px;
            font-weight: normal;
            font-size: 15px;
        }

        .text-list td {
            width: 280px;
            padding: 15px 10px 5px 5px;
            font-size: 13px;
        }

        .fraction {
            width: 160px;
            margin: 15px auto 0;
        }

        .con-word {
            margin-top: 20px;
            margin: 0 auto;
            width: 90%;
            font-size: 16px;
        }

        .chart {
            height: 588px;
            padding: 40px 0;
            background: #fff;
            box-shadow: 0 30px 50px rgba(0, 0, 0, .08);
            border-radius: 50px;
        }

        .conaa-ul {
            margin-bottom: 26px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
            background: #fff;
            padding: 20px 0;
            border-radius: 4px;
            text-align: center;
            margin-right: 20px;
            font-size: 12px;
            color: #aaa;
        }

        .li-chinese {
            color: #999;
            font-size: 14px;
        }

        .cont-total {
            width: 220px;
            height: 100px;
            margin: 50px auto;
            text-align: center;
        }

        .score {
            line-height: 36px;
            color: #555;
        }

        .total-score {
            display: block;
            color: #555;
        }

        footer {
            height: 66px;
            background-color: rgb(39, 39, 39);
        }

        .footer-a {
            text-align: center;
            line-height: 66px;
            font-size: 14px;
            font-weight: 600;
        }

        .color-f4a {
            color: #ec801b;
        }

        .color-1eb {
            color: #218f77;
        }

        .color-fa6 {
            color: #fa6b5b;
        }

        .color-fff {
            color: #fff;
        }

        .color-pp {
            color: #4278c7;
        }

        .width-100 {
            width: 100%;
        }

        .f-s-18 {
            font-size: 18px;
        }

        .f-s-24 {
            font-size: 24px;
        }

        .f-s-36 {
            font-size: 36px;
        }

        .f-l {
            float: left;
        }

        .m-t-6 {
            margin: 60px auto 0;
        }

        .p-l-40 {
            padding-left: 40px;
        }

        .p-t-40 {
            padding-top: 40px;
        }

        .p-40 {
            padding: 40px 0;
        }

        .p-t-16 {
            padding-top: 16px;
        }

        .p-b-4 {
            padding-bottom: 40px;
        }
    </style>
</head>

<body>
<div class="colorGray">
    <header>
        <div class="header-top width-100">
            <div class="main">
                <p class="top-title">专利分级管理管理系统</p>
            </div>
        </div>
        <div class="header-bottom width-100">
            <div class="main" style="position: relative;">
                <div class="bott-a f-s-24 color-fff">{{$patent->patent_name??''}}</div>
                <div class="bott-b color-fff f-s-18"><a style="color: #ffffff" href="javascript:void(0)" onclick="downPdf()">导出评估报告</a></div>
            </div>
        </div>
    </header>
    <div class="content main"  id="content">
        <div class="fenji">
            <div class="main row">
                <h2 class="title p-t-40">分级概况</h2>
                <div class="fenji-left f-l col-md-6">
                    <div class="fenji-chart">
                        <div id="fjgk" style="width: 100%;height:100%;"></div>
                    </div>
                </div>
                <div class="fenji-right col-md-6">
                    <div class="fenji-f-t" style="height: 530px;">
                        <div class="circle"></div>
                        <div class="text-list">
                            <table>
                                <tbody>
                                <tr>
                                    <th class="color-pp">专利名称</th>
                                    <td>{{$patent->patent_name??''}}</td>
                                </tr>
                                <tr>
                                    <th class="color-pp">专利类型</th>
                                    <td>{{data_get(patent_type_select_option(),$patent->patent_type_id,'')}}</td>
                                </tr>
                                <tr>
                                    <th class="color-pp">法律状态</th>
                                    <td>{{$patent->legal_status}}</td>
                                </tr>
                                <tr>
                                    <th class="color-pp">申 请 号</th>
                                    <td>{{$patent->patent_sn}}</td>
                                </tr>
                                <tr>
                                    <th class="color-pp">申 请 日</th>
                                    <td>{{$patent->apply_date}}</td>
                                </tr>
                                <tr>
                                    <th class="color-pp">IPC分类</th>
                                    <td>{{strtr($patent->ipc,[';'=>" "])}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="fraction">
                        <span class="score f-s-18">总分:</span>
                        <span class="f-s-36 color-pp">{{$gk['score']??0}}</span>
                        {{--<span class="total-score f-s-18">￥{{$gk['amount']??0}} 万元</span>--}}
                    </div>
                </div>
            </div>
        </div>
        <div class="law clear colorGray">
            <div class="main">
                <h2 class="title p-40">法律价值度</h2>
                <div class="con-word">
                    <span class="color-fa6">该维度得分由目标专利保护层级数</span>
                    、本专利和/或同族专利经历无效后确权、本专利和/或同族专利经历复审且获权、从属权利要求数量、说明书页数、<br/>
                    <span class="color-fa6">说明书页数/本技术领域说明书平均页数（本技术领域是指ipc小组）</span>
                    、是否聘请代理人、存活期等指标得出。
                </div>
                <div class="m-t-6 row">
                    <div class="col-md-6">
                        <div class="p-l-40 row">
                            @foreach($fl['data'] as $k=>$v)
                            <div class="col-md-5 conaa-ul">
                                <span class="f-s-24 color-fa6">{{$v}}</span>分
                                <div class="li-chinese">{{$k}}</div>
                            </div>
                            @endforeach
                            <div class="cont-total clear">
                                <div><span class="score f-s-18">得分:</span>
                                    <span class="f-s-36  color-fa6">{{$fl['score']}}</span>
                                </div>
                                <span class="total-score f-s-18">法律总分：100分</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 p-b-4">
                        <div class="chart">
                            <div id="fljz" style="width: 100%;height:100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="techonogy clear">
            <div class="main">
                <h2 class="title p-40">技术价值度</h2>
                <div class="con-word">
                    该维度得分由专利类型、引用专利文献的国别、他引率、申请人数、发明人数、引用专利文献数量、自引专利数量、
                    <span class="color-1eb">技术独立性指数</span><br/>
                    <span class="color-1eb">旁系引证专利数量</span>
                    、分类号数量、
                    <span class="color-1eb">普遍性</span>
                    <span class="color-1eb">、分类号分布跨度、</span>
                    扩散指数
                    、前向引证文献组合中最大时间跨度、
                    <span class="color-1eb"> 当前影响力</span>
                    等指标综合评估<br/>得出。
                </div>
                <div class="m-t-6 row">
                    <div class="col-md-6  p-b-4">
                        <div class="chart">
                            <div id="jsjz" style="width: 100%;height:100%;"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="p-l-40 row">
                            @foreach($js['data'] as $k=>$v)
                                <div class="col-md-5 conaa-ul">
                                    <span class="f-s-24 color-1eb">{{$v}}</span>分
                                    <div class="li-chinese">{{$k}}</div>
                                </div>
                            @endforeach
                            <div class="cont-total clear">
                                <div><span class="score f-s-18">得分:</span>
                                    <span class="f-s-36 color-1eb">{{$js['score']}}</span>
                                </div>
                                <span class="total-score f-s-18">技术总分：100分</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="economy clear colorGray">
            <div class="main">
                <h2 class="title p-40">经济价值度</h2>
                <div class="con-word">
                    该维度得分由市场应用情况、市场规模情况、市场占有率、竞争情况、政策适应性等指标得出。（其他经济指标暂未在图中展示）。
                </div>
                <div class="m-t-6 row">
                    <div class="col-md-6">
                        <div class="p-l-40 row">
                            @foreach($jj['data'] as $k=>$v)
                                <div class="col-md-5 conaa-ul">
                                    <span class="f-s-24 color-f4a">{{$v}}</span>分
                                    <div class="li-chinese">{{$k}}</div>
                                </div>
                            @endforeach
                            <div class="cont-total clear">
                                <div>
                                    <span class="score f-s-18">得分:</span>
                                    <span class="f-s-36 color-f4a">{{$jj['score']}}</span>
                                </div>
                                <span class="total-score f-s-18">经济总分：100分</span>
                            </div>
                        </div>
                    </div>
                    <div class="f-l col-md-6 p-b-4">
                        <div class="chart">
                            <div id="jjjz" style="width: 100%;height:100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="clear width-100">
        <div class="main">
            <div class="footer-a color-fff">Copyright © 2008-2021  版权所有</div>
        </div>
    </footer>
</div>
</body>

<script>
    var fjgk = echarts.init(document.getElementById('fjgk'), null, {renderer: 'canvas'});
    var fljz = echarts.init(document.getElementById('fljz'), null, {renderer: 'canvas'});
    var jsjz = echarts.init(document.getElementById('jsjz'), null, {renderer: 'canvas'});
    var jjjz = echarts.init(document.getElementById('jjjz'), null, {renderer: 'canvas'});
    fjgk.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c}'
        },
        series: [
            {
                name: '分级概况',
                type: 'pie',
                radius: [20, 170],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                label: {
                    formatter: '{b}: {c}'
                },
                data: [
                        @foreach($gk['data'] as $k=>$v)
                            {value: '{{$v}}', name: '{{$k}}'},
                        @endforeach
                ]
            }
        ]
    });
    fljz.setOption({
        angleAxis: {
            type: 'category',
            data: [
                    @foreach($fl['data'] as $k=>$v)
                        '{{$k}}',
                    @endforeach
            ]
        },
        radiusAxis: {},
        polar: {},
        series: [{
            type: 'bar',
            color: '#fa6b5b',
            data: [
                @foreach($fl['data'] as $k=>$v)
                    '{{$v}}',
                @endforeach
            ],
            coordinateSystem: 'polar',
        }],
    });
    jsjz.setOption({
        radar: {
            //shape: 'circle',
            indicator: [
                @foreach($js['data'] as $k=>$v)
                    {name: '{{$k}}', max: 100},
                @endforeach
            ],

        },
        series: [{
            type: 'radar',
            data: [
                {
                    value: [
                            @foreach($js['data'] as $k=>$v)
                            '{{$v}}',
                        @endforeach
                    ],
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                return params.value;
                            }
                        }
                    },
                    areaStyle: {
                        color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                            {
                                color: 'rgba(255, 145, 124, 0.1)',
                                offset: 0
                            },
                            {
                                color: '#218f77',
                                offset: 1
                            }
                        ])
                    }

                }
            ]
        }]
    });
    jjjz.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: [
                @foreach($jj['data'] as $k=>$v)
                    '{{$k}}',
                @endforeach
            ]
        },
        series: [
            {
                name: '分值',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [
                    @foreach($jj['data'] as $k=>$v)
                        '{{$v}}',
                    @endforeach
                ],
                color: '#ec801b',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,		//开启显示
                            //position: 'right',	//在上方显示
                            textStyle: {	    //数值样式
                                color: 'black',
                                fontSize: 16
                            }
                        }
                    }
                }
            }
        ]
    });
    function downPdf() {
        html2canvas(document.getElementById("content"), { background: '#FFF'}).then(function (canvas) {
            var imgUrl = canvas.toDataURL('image/jpeg',1.0); // 是图片地址的base64
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            var imgWidth = 773.84;
            var imgHeight = 769.96 / contentWidth * contentHeight;
            var doc = new jspdf('', 'pt', [imgWidth, imgHeight]); // 转化为pdf
            doc.addImage(imgUrl, 'JPEG', 0, 0, imgWidth, imgHeight);
            doc.save('{{$patent->patent_name??'评估报告'}}.pdf');
        });
    }
</script>
</html>
